import { motion } from 'framer-motion';
import { CameraOutlined, ClockCircleOutlined, FileTextOutlined } from '@ant-design/icons';

export const ProfilePage = () => {
  const orders = [
    {
      id: 1,
      date: '2024-03-20 14:30',
      status: '已完成',
      template: '模板1',
      image: 'https://picsum.photos/200/200?random=1'
    },
    {
      id: 2,
      date: '2024-03-19 16:45',
      status: '打印中',
      template: '模板2',
      image: 'https://picsum.photos/200/200?random=2'
    },
    {
      id: 3,
      date: '2024-03-18 10:20',
      status: '待付款',
      template: '模板3',
      image: 'https://picsum.photos/200/200?random=3'
    }
  ];

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="container mx-auto px-4 py-6"
    >
      {/* 用户信息卡片 */}
      <div className="bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl p-6 text-white mb-6">
        <div className="flex items-center gap-4">
          <div className="w-16 h-16 rounded-full bg-white/20 backdrop-blur-xl flex items-center justify-center">
            <CameraOutlined className="text-2xl" />
          </div>
          <div>
            <h2 className="text-xl font-bold">我的相册</h2>
            <p className="text-white/80">已拍摄 {orders.length} 张照片</p>
          </div>
        </div>
      </div>

      {/* 订单列表 */}
      <h3 className="text-lg font-semibold text-gray-800 mb-4">拍照记录</h3>
      <div className="space-y-4">
        {orders.map((order) => (
          <motion.div
            key={order.id}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            className="bg-white rounded-xl p-4 shadow-sm border border-gray-100"
          >
            <div className="flex gap-4">
              <div className="w-20 h-20 rounded-lg overflow-hidden">
                <img
                  src={order.image}
                  alt={`订单 ${order.id}`}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="flex-1">
                <div className="flex justify-between items-start mb-2">
                  <h4 className="font-medium text-gray-800">{order.template}</h4>
                  <span className={`text-sm px-2 py-1 rounded-full ${
                    order.status === '已完成' ? 'bg-green-100 text-green-600' :
                    order.status === '打印中' ? 'bg-blue-100 text-blue-600' :
                    'bg-yellow-100 text-yellow-600'
                  }`}>
                    {order.status}
                  </span>
                </div>
                <div className="flex items-center text-sm text-gray-500 gap-2">
                  <ClockCircleOutlined />
                  <span>{order.date}</span>
                </div>
                <div className="mt-2 flex gap-2">
                  <button className="text-sm text-purple-600 hover:text-purple-700">
                    <FileTextOutlined className="mr-1" />
                    查看详情
                  </button>
                </div>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </motion.div>
  );
}; 